<!DOCTYPE html>
<html lang="cn">
<head>
<!--    必须存在如下的三个meta标签-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LeeG演示网站</title>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
<!--    引入css文件-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
        .nav_box {
            display: flex;
            align-items: center;
        }
        .banner_icon {
            width: 120px;
            display: block;

        }
        .banner_icon img {
            width: 100%;
            height: 100%;
        }
        .nav_group {
            width: 100%;
        }
    </style>
</head>
<body>
<!--    固定宽度布局时必须有container标签-->
<!--        设置row属性可以取消默认的15px的padding值-->
        <div class="container">
            <h2 class="page-header">导航条</h2>
            <nav class="navbar navbar-default">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">
                        <img src="img/resizeApi.png" alt="">
                    </a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="">个人中心</a></li>
                    <li><a href="#">用户注册</a></li>
                    <li><a href="#">用户注销</a></li>
                    <li><a href="https://blog.csdn.net/weixin_44723496">官网链接</a></li>
                </ul>
                <!--向导航条里添加表单时，要添加类为 导航里的表单“navbar-form” -->
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入学号">
                    </div>
                    <button class="btn btn-primary">搜索</button>
                </form>
                <!--向导航条里添加文本时，要添加类为 导航里的表单“navbar-text” -->
            </nav>
            <div>
                <div class="col-md-2" style="height: 500px;width: auto">
                    <a class="banner" href="https://blog.csdn.net/weixin_44723496"><img src="img/LeeG.jpg" alt=""></a>
                    <div class="hot">
                        <h3>开发者：LeeG</h3>
                        <h6 class="text-primary" >个人技术博客:https://blog.csdn.net/weixin_44723496</h6>
                        <h5>一只不会掉发只会敲代码的小白</h5>
                    </div>
                </div>
                <div style="color: #2a6496;margin-top: 40px;margin-left: 500px; width: 400px">
                    <h3 style="margin-bottom: 30px">    姓名: <input value="LeeG"></input></h3>
                    <h3 style="margin-bottom: 30px">    学号: <input value="2018081606"></input></h3>
                    <h3 style="margin-bottom: 30px">    性别: <input value="男"></input></h3>
                    <h3 style="margin-bottom: 30px">    年龄: <input value="20" pattern="[0-9]"></input></h3>
                    <h3 style="margin-bottom: 30px">    电话: <input value="15642681085"></input></h3>
                    <h3>    地址: <input value="湖南省娄底市"></input></h3>
                    <div style="margin-top: 40px;display: flex;justify-content: space-evenly">
                        <button class="btn btn-primary" style="font-size: 20px">刷新</button>
                        <button class="btn btn-primary" style="font-size: 20px">修改</button>
                    </div>
                </div>
            </div>


        <!--
        <div class="row">
            <header class="col-md-2">
                    <a class="banner" href="https://blog.csdn.net/weixin_44723496"><img src="img/LeeG.jpg" alt=""></a>
                    <div class="hot">
                        <h3>开发者：LeeG</h3>
                        <h5 class="text-primary" >个人技术博客:https://blog.csdn.net/weixin_44723496</h5>
                        <h4>未来是你的</h4>
                    </div>
                <br>
                <div class="nav">
                    <ul>
                        <li><a class="glyphicon glyphicon-book" href="#">个人中心</a></li>
                        <li><a class="glyphicon glyphicon-facetime-video" href="#">用户查询</a></li>
                        <li><a class="glyphicon glyphicon-film" href="#">用户注册</a></li>
                        <li><a class="glyphicon glyphicon-sound-6-1" href="#">信息修改</a></li>
                        <li><a class="glyphicon glyphicon-headphones" href="#">用户注销</a></li>
                    </ul>
                </div>
            </header>
            <article class="col-md-7">
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <h4>森屿暖树</h4>
                            <p class="text-muted">huasen 发布于 2017-06-18</p>
                            <p>森林覆盖的岛屿花开遍地，一切都将如此美好。谁在月下变成桂树，可以躲得过夜夜思念。现在你还在凤凰，在美景歇息的片刻，又是谁执意从你脑海中跑出来。</p>
                            <p class="text-muted">阅读（400）赞（32）文艺/心灵/美好</p>
                        </div>
                    </div>
                </div>
            </article>

        </div>-->
    </div>
    <script src="js/jquery.min.js"></script>
<!--    不支持<script src="js/jquery-3.0.0.min.js"></script>-->
    <script src="js/bootstrap.js"></script>
    <script>
        $("#mytab a").click(function (e) {
            e.preventDefault();
            $(this).tab("show");
        })
        $(function () {
            $('[data-toggle="popover"]').popover()
        })
    </script>
</body>
</html>